<template>
<el-dropdown @command="clickEvent">
  <span class="el-dropdown-link">
    {{name}}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown" >
    <el-dropdown-item  v-for="us in options" :key="us.index"  :command="us.events">{{us.name}}</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
</template>
<style>
  .el-dropdown-link {
    cursor: pointer;
    height: 60px;
    line-height: 60px;
    font-size: 150%;
    color: #ffffff;
    font-weight: 600;
  }
  .el-icon-arrow-down {
    font-size: 70%;
    font-weight: 600;
    color: blue;
  }
</style>

<script>
  import store from "../store"
  export default {
    props:{
      name:String,
      options:Array
    },
    methods:{
      clickEvent(command) {
        if(typeof(command)==="function")command();
      }
    }

  }
</script>
